<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 表单 -->
    <van-form @submit="register">
      <van-cell-group inset>
        <van-field
          v-model="password"
          type="new-password"
          name="密码"
          label="密码"
          placeholder="至少6位,包含:数字,大小写字母"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          disabled
          block
          type="warning"
          native-type="submit"
          v-if="!check"
        >
          下一步
        </van-button>
        <van-button
          round
          block
          type="danger"
          @click=""
          native-type="submit"
          v-else
        >
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../stores/counter";
import { storeToRefs } from "pinia";
import { dofinishregister } from "../../server/user";
const counterStore = useCounterStore();
const { username } = storeToRefs(counterStore);
let router = useRouter();
//定义变量 存储密码
let password = ref("");
// 验证密码
let check = computed(() => {
  let r =
    /^(?=.{6})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[*?!&￥$%^#,./@";:><\[\]}{\-=+_\\|》《。，、？’‘“”~ ])/;
  return r.test(password.value);
});
// 定义函数 返回按钮
function onClickLeft() {
  router.go(-1);
}
// 确认注册
function register() {
  dofinishregister({
    tel: username.value,
    password: password.value,
  }).then((res: any) => {
    if (res.code === "200") {
      password.value = "";
      router.push("/login");
    }
  });
}
</script>
<style scoped>
.van-form {
  margin-top: 3.125rem;
}
.van-button {
  margin-top: 6.25rem;
}
</style>
